<template>
    <div class="container">
        <div v-if="expressList.length" class="express-cell">
            <div class="title">
                <div class="text">订单已签收</div>
                <div class="time">2018.10.09</div>
            </div>
            <div class="item-info">
                <div class="img">
                    <div class="tip">共2件商品</div>
                </div>
                <div class="info">
                    <div class="item-name">
                        男款秋修身圆领卫衣套装绿男款秋修身圆领卫衣套装绿…
                    </div>
                    <div class="order-number">运单编号：1234567895</div>
                </div>
            </div>
        </div>
        <div class="no-express" v-else>
            <img src="@/assets/待入账收益-assets/no_message.png" alt="">
            <div class="text">暂无消息</div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                expressList: ['']
            };
        }
    };
</script>

<style lang="less" scoped>
    .container {
        min-height: 100%;
        height: auto;

        .express-cell {
            background: #fff;
            margin-top: 0.48rem;
            padding: 0.4rem;
            font-size: 0.56rem;
            color: #444444;

            .title {
                display: flex;
                justify-content: space-between;

                .time {
                    color: #999999;
                }
            }

            .item-info {
                background: rgba(245, 245, 245, 1);
                height: 3.2rem;
                display: flex;
                margin-top: 0.3rem;

                .img {
                    height: 3.2rem;
                    width: 3.2rem;
                    background-color: #dfdfdf;
                    position: relative;
                    margin-right: 0.48rem;

                    .tip {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        color: #fff;
                        font-size: 0.44rem;
                        background-color: rgba(0, 0, 0, 0.6);
                        height: 0.68rem;
                        line-height: 0.68rem;
                        width: 100%;
                        text-align: center;
                    }
                }

                .info {
                    width: calc(100% - 3.68rem);

                    .item-name {
                        max-height: 1.6rem;
                        overflow: hidden;
                        margin-top: 0.2rem;
                    }

                    .order-number {
                        margin-top: 0.5rem;
                        color: #999999;
                        font-size: 0.48rem;
                    }
                }
            }
        }

        .no-express {
            text-align: center;
            padding-top: 3rem;

            img {
                height: 4rem;
            }

            .text {
                color: rgba(68, 68, 68, 1);
                font-size: 0.58rem;
            }
        }
    }
</style>
